<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" href="/static/~.css?31" rel="stylesheet" media="screen" />
<script type="text/javascript" src="/static/jquery.json.min.js"></script>
<script type="text/javascript" src="/static/socket.io.min.js"></script>
<script type="text/javascript" src="/static/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/static/jquery.flot.min.js"></script>
<script type="text/javascript" src="/static/jstorage.min.js"></script>
<script type="text/javascript" src="/static/core.js"></script>
</head>
<body>

<!-- UPLOAD/DOWNLOAD IFRAME -->
<iframe id="file-process" name="file-process" width="1px" height="1px" src="" style="display:none;"></iframe>

<!-- SEARCH INIT BOX -->
<div id="initbox"><div class="btn" rel="">Show <span style="font-size:2.1em;line-height:0.5;">&darr;</span></div></div>

<!-- LOADING BOX -->
<div id="loadbox">Thinking...</div>

<!-- NOTIFIER BOX -->
<div id="notifybox" class="_closable">
    <div class="cross _close" style="margin-right:4px;margin-top:4px;"></div>
    <div id="errormsg">This browser doesn't work properly with this page.<br />Please, try to use Chrome, Firefox, Safari or Opera browser.<br />Thank you in advace and sorry for inconvenience.</div>
</div>

<!-- LOGO BOX: ALWAYS VISIBLE!
<div id="logobox">
    <div id="tilde-logo-sm"><a href="#start"></a></div>
    <div id="menu"></div>
</div> -->

<!-- SETTINGS / USER BOX: ALWAYS VISIBLE! -->
<div id="pre-user-box">
    <div id="settings_trigger" class="btn left">troubleshoot</div>
    <div id="debug-button" class="btn left">console</div>
</div>
<div id="userbox">
    <div id="userinfo">
        <div id="username">authorizing...</div>
        <div id="left_half_gear"></div>
    </div>
    <div id="useract">
        <div id="right_half_gear"></div>
        <span id="about_trigger" class="link white">about</span>
    </div>
</div>

<!-- CONNECTORS WINDOW -->
<div id="connectors" class="window shadow _closable">
    <div class="cross _close"></div>
    <ul id="conn-menu" class="ipane-ctrl">
        <li rel="conn-local">local</li>
        <!--<li rel="conn-upload">upload</li>-->
        <!--<li rel="conn-dropbox">dropbox</li>-->
    </ul>
    <div class="ipane" rel="conn-local">
        <div id="tilda-local-filetree" class="filetree"></div>
    </div>
    <div class="ipane" rel="conn-upload">
        <form id="upload_form" action="/upload" target="file-process" method="post" enctype="multipart/form-data" style="margin:50px 30px;">
            <input type="file" name="file" size="52" value="">
            <input type="submit" value="Upload" id="upload_start">
        </form>
    </div>
</div>

<!-- USER PROFILE AND SETTINGS WINDOW -->
<div id="profile-holder" class="shadow _closable">
    <div id="settings-frame">
    <div id="settings-holder">
        <div class="cross _close"></div>
        <ul id="settings-menu" class="ipane-ctrl">            
            <li rel="cols">data table</li>
            <li rel="units">units</li>
            <li rel="scan" class="protected">scan</li>
            <li rel="admin">troubleshoot</li>
        </ul>
        
        <div class="ipane" rel="cols">
            <div>Columns to display <b>(max. <span id="maxcols"></span>)</b>:</div>
            <div id="ipane-cols-holder"><ul></ul></div>
            <div>Maximum number of items in table:</div>
            <div id="ipane-maxitems-holder"></div>
        </div>
        
        <div class="ipane" rel="units">
            <div>New settings will be applied for the newly requested portions of data.</div>
            <div id="ipane-units-holder"></div>
        </div>
        
        <div class="ipane" rel="scan">
            <form id="settings_form">
            <div>A working path to display<br />(e.g. <b>/home/user/work</b> or <b>D:\science</b>):</div>
            <div><input type="text" value="" id="settings_local_path" style="border:1px solid #06c;height:30px;width:100%;"></div>
            <div><input type="checkbox" id="settings_quick_regime" checked=""> <label for="settings_quick_regime">skip files > 25 Mb</label></div>
            <div><input type="checkbox" id="settings_filter" checked=""> <label for="settings_filter">skip uncompleted (without ending tag)</label></div>
            <div><b>Your files will be never modified or shown to anyone without your explicit permission!</b></div>
            </form>
        </div>
        
        <div class="ipane" rel="admin">
            <div>In case program is getting slower or doesn't respond, try this:</div>
            <div id="ui-restart" class="btn btn3" style="width:200px;margin:30px auto 0;padding-top:3px;">restart user interface</div>
            <div id="core-restart" class="btn btn3 protected" style="width:200px;margin:30px auto 0;padding-top:3px;">restart program core</div>
            <div class="protected">To create a new results database, use this:</div>
            <div id="db-cleaner" class="btn btn3 protected" style="width:200px;margin:30px auto 0;padding-top:3px;">reset database</div>
        </div>
        
    </div>
    <div class="btn" id="profile-close" style="width:120px;margin:30px auto 0;">OK</div>
    </div>
</div>

<!-- DEBUG WINDOW -->
<div id="debug-holder" class="_closable downscreen" style="display:none;">
    <div class="downscreen-close _close"></div>
    <div id="debug"></div>
</div>

<!-- CLONABLE OBJECT LAYOUT -->
<div id="object-factory" class="object-factory-holder shadow">
    <div class="object-holder">
    
    <!-- OBJECT MAIN LAYOUT LEFT SIDE -->
    <div class="object-ctx-left">
        <ul class="ipane-ctrl">
            <li rel="summary">summary</li>
            <li rel="vib" style="display:none;">phonons</li>
        </ul>
        <div class="ipane" rel="summary">
        </div>
        <div class="ipane ii" rel="vib">
            <div class="ipane-local-menu">
                <div class="btn btn2 left ph_degenerated_trigger">show degenerated</div>
                <div class="btn btn2 left ph_animate_trigger">animate</div>
            </div>
            <div class="freqs-table-holder">
                <table class="freqs-holder">
                <thead>
                <tr>
                <th width='25%' class="thsorter">BZ point</th>
                <th width='14%' class="thsorter">Irrep</th>
                <th width='25%' class="thsorter">Value, <span class="units-phonons">cm<sup>-1</sup></span></th>
                <th width='20%' class="thsorter">Raman-active</th>
                <th width='16%' class="thsorter">IR-active</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- OBJECT MAIN LAYOUT RIGHT SIDE -->
    <div class="object-ctx-right">
        <ul class="ipane-ctrl">
            <li rel="3dview">3D-view</li>
            <li rel="e_dos" style="display:none;">el.DOS</li>
            <li rel="e_bands" style="display:none;">el.bands</li>
            <li rel="ph_dos" style="display:none;">vib.DOS</li>
            <li rel="ph_bands" style="display:none;">vib.bands</li>
        </ul>
        
        <div class="cross _destroy"></div>
        
        <div class="ipane ii" rel="3dview">
            <div class="renderer"></div>
        </div>
        <div class="ipane ii" rel="ph_dos">
            <div class="ipane-local-menu center">
                <div class="btn btn2 right export_plot">export</div>
            </div>
            <div class="ph_dos-holder flot_holder"></div>
        </div>
        <div class="ipane ii" rel="e_dos">
            <div class="ipane-local-menu center">
                <div class="btn btn2 right export_plot">export</div>
            </div>
            <div class="e_dos-holder flot_holder"></div>
        </div>
        <div class="ipane ii" rel="ph_bands">
            <div class="ipane-local-menu center">
                <div class="btn btn2 right export_plot">export</div>
            </div>
            <div class="ph_bands-holder flot_holder"></div>
        </div>
        <div class="ipane ii" rel="e_bands">
            <div class="ipane-local-menu center">
                <div class="btn btn2 right export_plot">export</div>
            </div>
            <div class="e_bands-holder flot_holder"></div>
        </div>
    </div>
    </div>
</div>

<!-- LANDING LAYOUT -->
<div id="landing-holder" class="pane">

    <!-- TOP LOGO SIDE -->
    <div id="top">
        <div id="tilde-logo"></div>    
    </div>

    <!-- MAIN CONTENT SIDE -->
    <div id="mainframe" class="shadow">        
        <div id="welcome">
            <p>Welcome to Tilde, the knowledge-management system in computational material science. It organizes and visualises the simulation results produced with VASP, CRYSTAL, WIEN2K, Gaussian and other scientific packets.</p>
            
            <p>Tilde is an open-source project of Max-Planck Institute for Solid State Research (Stuttgart, Germany) and Saint&nbsp;Petersburg State University (Russia). See more info at <span style=white-space:nowrap>http://wwwtilda.googlecode.com</span></p>

            <div id="continue_trigger" rel="first_run" class="btn btn2" style="width:147px;margin:20px auto;font-size:1.1em">Continue <span style="font-size:2.1em">&rarr;</span></div>
            
        </div>
    </div>

</div>

<!-- DATABROWSER LAYOUT -->
<div id="data-holder" class="pane">
    <div class="menu">
        <div class="menu_main_cmds">
            <!--<div class="btn left ui" dest="start">&#8592; to start</div>-->
            <!--<div class="btn left" id="collapser_new">add new output</div>-->
            <div class="btn left protected" id="add_trigger">add outputs</div>
            <div class="btn btn2 left" id="noclass_trigger">show all topics</div>
            <div class="btn btn2 left" id="tagcloud_trigger" style="display:none;">classifier</div>
            <div class="btn btn3 left" id="closeobj_trigger" style="display:none;">hide all details</div>
            <!--<div class="btn btn left ui" dest="shared" id="shared">show shared reports</div>-->
            <!--<div class="btn btn left ui" dest="browse" id="browse" style="display:none;">show only my reports</div>-->
            <!--<div class="btn btn2 left ui" dest="see" id="show_all" style="display:none;">show all my reports</div>-->
            <div id="countbox"></div>
        </div>
        <!--<div class="menu_ctx_cmds" style="display:none;">-->
            <!--<div class="left" style="padding:8px 0 0 8px">With selected:</div>-->
            <!--<div class="btn left" id="chk_rerun">refresh</div>-->
            <!--<div class="btn btn2 left" id="chk_shrd">share</div>-->
            <!--<div class="btn btn2 left" id="chk_shrd">unshare</div>-->
            <!--<div class="btn btn3 left" id="trigger_delete">remove from db</div>-->
        <!--</div>-->
    </div>
    <!--<div id="collapser_menu" style="display:none">
        <ul>
            <li class="ui" dest="local">from this server</li>
            <li class="ui" dest="upload">upload from PC</li>
        </ul>
    </div>-->
    <div id="splashscreen"></div>
    
    <table id="databrowser" class="tablesorter"></table>
    
    <div id="tagcloud-holder" class="_closable downscreen ii" style="display:none;">
        <div class="downscreen-close _close"></div>
        <div id="tagcloud"></div>
    </div>
</div>

</body>
</html>